<template>
	<view class="pages">
		<view class="box box1" style="padding: 20rpx 0 0;">
			<!-- <view style="font-weight:bold;">订单信息</view> -->
			<view class="a" style="padding:0 20rpx;">
				<view>订单状态</view> 
				<view style="display: flex;justify-content: flex-end;">
					<!--   0待付款 1 已发布 2待服务3售后 4 售后中 5售后完成 6已完成 7已取消 -->
					<text style="color: #277EEF;" v-if="info.orderStatus==0">待付款</text>
					<text style="color: #277EEF;"  v-else-if="info.orderStatus==1">已发布</text>
					<view v-else-if="info.orderStatus==2">
						<text style="color: #277EEF;">{{info.orderSubStatus | statusStr}}</text>
					</view>
					<text style="color: #277EEF;" v-else-if="info.orderStatus==3">售后</text>
					<text style="color: #277EEF;" v-else-if="info.orderStatus==4">售后中</text>
					<text style="color: #277EEF;" v-else-if="info.orderStatus==5">售后完成</text>
					<text style="color: #277EEF;" v-else-if="info.orderStatus==6">已完成</text>
					<text style="color: #277EEF;" v-else-if="info.orderStatus==7">已取消</text>
					<text style="color: #277EEF;" v-else>{{info.orderStatus}}</text> 
				</view>
 			</view> 
			<view  v-for="(item,index) in orderStaffDOS" :key="item.id">
				<view class="b"  style="padding:0 20rpx;">
					<view style="width: 150rpx;font-weight: 500;">服务人员{{index+1}}</view> 
					<view class="contact">
						<view class="tou">
							<image :src="item.profilePhoto" mode="aspectFill" style="border-radius: 50%;"></image>
						</view>
						<text>{{item.name || "服务员"}}</text>
						<view class="ly" @click="createdMessage(item)">留言</view>
					</view>
					<view class="staus">
						{{   formatDict(dictCode.staff_user_status, item.staffStatus)}}
					</view>
				</view>  
				<!-- 转单 -->
				<view  v-for="(it,i) in item.orderTransferDOS" :key="it.id" v-if="info.orderSubStatus==6">
					<view class="b" style="padding:0 20rpx;">
						<view style="width: 150rpx;font-weight: 500;">转单原因</view> 
						<view class="contact"> </view>
						<view class=" ">
							{{it.reason}}
						</view>
					</view>  
					<view class="b"  style="padding:0 20rpx;margin-top: 20rpx;">
						<view style="width: 150rpx;color: #999999;">申请时间</view> 
						<view class="contact"> </view>
						<view style="color: #999999;">
							{{it.createTime | formatDate}}
						</view>
					</view>
					<view class="flex" style="background: #277EEF;border-radius: 0rpx 0rpx 20rpx 20rpx;padding: 40rpx;margin-top: 20rpx;">
						<view class="woodsbtn" style="border: 1rpx solid #fff;padding: 20rpx 0rpx;" @click="staffTransferOrder(2)"> 不同意</view>
						<view class="woodsbtn" style="border: 1rpx solid #fff;padding: 20rpx 0rpx;" @click="staffTransferOrder(1)"> 同意转单</view>
					</view>
				</view>
				<!-- 取消 -->
				<view  v-for="(it,i) in item.cancelDOS" :key="it.id" v-if="info.orderSubStatus==7">
					<view class="b" style="padding:0 20rpx;">
						<view style="width: 150rpx;font-weight: 500;">取消原因</view> 
						<view class="contact"> </view>
						<view class=" ">
							{{it.reason}}
						</view>
					</view>  
					<view class="b"  style="padding:0 20rpx;margin-top: 20rpx;">
						<view style="width: 150rpx;color: #999999;">申请时间</view> 
						<view class="contact"> </view>
						<view style="color: #999999;">
							{{it.createTime | formatDate}}
						</view>
					</view>
					<view class="flex" style="background: #277EEF;border-radius: 0rpx 0rpx 20rpx 20rpx;padding: 40rpx;margin-top: 20rpx;">
						<view class="woodsbtn" style="border: 1rpx solid #fff;padding: 20rpx 0rpx;" @click="staffCancelOrder(2)"> 不同意</view>
						<view class="woodsbtn" style="border: 1rpx solid #fff;padding: 20rpx 0rpx;" @click="staffCancelOrder(1)"> 同意取消</view>
					</view>
				</view>
				<!--  修改订单 item.orderHistoryDOS v-if="info.orderSubStatus==11"-->
				<view class="" v-for="(it,i) in item.orderHistoryDOS" :key="it.id">
					<view class="b" style="padding:0 20rpx;">
						<view style="width: 150rpx;font-weight: 500;">修改原因</view> 
						<view class="contact"> </view>
						<view class=" "> {{it.reason}} </view>
					</view>  
					<view class="b"  style="padding:0 20rpx;margin-top: 20rpx;">
						<view style="width: 150rpx;color: #999999;">申请时间</view> 
						<view class="contact"> </view>
						<view style="color: #999999;"> {{it.createTime | formatDate}} </view>
					</view>
					<view  
					style="background-color: #277EEF;padding: 20rpx;border-radius: 0rpx 0rpx 20rpx 20rpx;margin-top: 20rpx;">
						<view class="adress">
							<view class="">
								<view class="a1">{{strToJson(it.newValue).receiverDetailAddress}}</view>
								<view class="a2">{{strToJson(it.newValue).receiverName}} {{strToJson(it.newValue).receiverMobile}}</view>
							</view>
							 
						</view>
						<view style="background-color: #fff;border-radius: 10rpx;padding: 20rpx;margin-top: 30rpx;">
							<view class="b" style="padding:20rpx;">
								<view style="width: 150rpx;font-weight: 500;">服务日期：</view> 
								<view class="contact"> </view>
								<view class=" "> {{strToJson(it.newValue).serviceStartTime}}-{{strToJson(it.newValue).serviceEndTime}} 
									
								</view>
							</view>  
							<view class="b" style="padding:20rpx;">
								<view style="width: 150rpx;font-weight: 500;">服务时间：</view> 
								<view class="contact"> </view>
								<view class=" "> {{strToJson(it.newValue).timeCycle}} 
								<!-- <text v-if="strToJson(it.newValue).serviceSection">{{strToJson(it.newValue).serviceSection}} </text> -->
								</view>
							</view>  
						</view>
						 
						<view class="flex" style="background: #277EEF;border-radius: 0rpx 0rpx 20rpx 20rpx;padding: 30rpx;margin-top: 20rpx;">
							<view class="woodsbtn" style="border: 1rpx solid #fff;padding: 20rpx 0rpx;" @click="updateOrderApply(2)"> 不同意</view>
							<view class="woodsbtn" style="border: 1rpx solid #fff;padding: 20rpx 0rpx;" @click="updateOrderApply(1)"> 同意修改</view>
						</view>
					</view>
				</view>
				
				 
				
			</view>
			
			<view v-if="orderStaffDOS.length==0" style="height: 20rpx;">
				
			</view> 
			<statusRecord :afterSaleDO="info.afterSaleDO" v-if="info.afterSaleDO" :ids="id" @getinfo="getdata"/>
			<view class="flex" style="border-top: 1rpx solid #EEEEEE;padding:30rpx 20rpx;" v-if="after.isEnd==1">
				<view  style="width: 150rpx;color: #999999;"> 售后补偿 </view>
				<view class="flex" style="justify-content: space-between;flex: 1;">
					<text style="color: #333333;">{{after.remark}}</text>
					<text style="color: #AAAAAA;font-size: 24rpx;">{{after.stageTime | formatDate}}</text>
				</view>
			</view>
		</view> 
		
		<view style="padding: 20rpx;background-color: #F8F8F8;">
			<view class="box box2">
				 
				<view class="a">
					<view>服务项目</view> 
					<view>{{info.categoryName}}</view>
				</view> 
				<view class="a" v-if="info.type==2">
					<view>数量</view> 
					<view>{{info.num}}</view>
				</view> 
				<view class="a">
					<view>服务日期</view> 
					<view v-if="info.type==2">{{info.serviceStartTime}}</view>
					<view v-else>{{info.serviceStartTime}}/{{info.serviceEndTime}}</view>
				</view>  
				<view class="a" v-if="info.type==3 || info.type==2">
					<view>截止接单时间</view> 
					<view>{{info.deadlineTime | formatDate}}</view>
				</view> 
				
				<view class="a" v-if="info.type==3">
					<view>休息天数</view> 
					<view>{{info.restDays || "-"}}</view>
				</view> 
				<view class="a" v-if="info.type==1">
					<view>服务时间</view> 
					<view>{{info.timeCycle || "-"}}</view>
				</view> 
				<view class="a">
					<view>服务地址</view> 
					<view>{{info.areaAddress || ''}}{{info.receiverDetailAddress || '-'}}</view>
				</view> 
				<view class="a">
					<view>联系人</view> 
					<view>{{info.receiverMobile}}</view>
				</view> 
				<view class="a">
					<view>工具使用</view> 
					<view>{{info.toolUsage}}</view>
				</view> 
				<view class="a"  v-if="info.type==1">
					<view>是否有宠物</view> 
					<view>{{info.isPet==1? '是':'否'}}</view>
				</view> 
				<view class="a">
					<view>客户留言</view> 
					<view>{{info.remark || ''}}</view>
				</view> 
				 
				 
				<view class="b" >
					<view>现场照片</view> 
					<view class="img" style="margin-top: 20rpx;" v-if="images.length">
						<image :src="item" mode="aspectFill" v-for="(item,i) in images" @click="lookImg(item)" :key="i"></image>
					</view>
				</view>
			</view>
				 
		 
			<view class="box">
				<view class="box-top" @click="periceFlag=!periceFlag">
					<view style="font-size: 28rpx;margin-right: 15rpx;font-weight: 600;">实付款</view>
					
					<view class="flex" style="align-items:center;">
						<text class="rmb">￥</text> 
						<text style="font-size: 40rpx;margin-right: 15rpx;">{{info.actualMoney || ''}} </text>
						<u-icon name="arrow-up" color="#999" size="16" v-if="periceFlag"></u-icon>
						<u-icon name="arrow-down" color="#999" size="16" v-else></u-icon>
					</view>
					
				</view>
				<view class="" v-if="periceFlag">
					<view class="a">
						<text style="font-size: 28rpx;">商品总价</text> 
						<view style="font-size: 28rpx;">￥{{info.totalMoney}}</view>
					</view>
					 
					<view class="a">
						<view style="font-weight: 400;">平台优惠券</view> 
 						<text  >{{info.discountSystemPrice || "-"}}</text>
					</view>  
					<view class="a">
						<view style="font-weight: 400;">商户优惠券</view> 
 						<text  >{{info.discountMerchantPrice || "-"}}</text>
						
					</view> 
					<view class="a">
						<view style="font-weight: 400;">员工优惠券</view> 
 						<text  >{{info.discountStaffPrice || '-'}}</text>
					</view> 
					<view class="a">
						<view style="font-weight: 400;">交通补贴</view> 
						<text>{{info.subsidyMoney || '-'}}</text>
					</view> 
					 
					 
				</view>
				 
			</view>
			<view class="box">
				<view class="box-top" @click="orderFlag=!orderFlag">
					<view style="font-size: 28rpx;margin-right: 28rpx;font-weight: 600;">订单编号</view>
					
					<view class="flex" style="align-items:center;">
						 
						<text style="color: #999999;font-weight: 400;margin-right: 15rpx;">{{info.orderCode || ''}} </text>
						<u-icon name="arrow-up" color="#999" size="16" v-if="orderFlag"></u-icon>
						<u-icon name="arrow-down" color="#999" size="16" v-else></u-icon>
					</view>
					
				</view>
				<view class="" v-if="orderFlag">
					<view class="a" v-if="info.createTime">
						<text style="font-weight: bold;">创建时间</text> 
						<view style="color: #999999;font-weight: 400;">{{info.createTime | formatDate}}</view>
					</view>
					 
					<view class="a" v-if="info.payTime">
						<text style="font-weight: bold;">付款时间</text> 
						<view style="color: #999999;font-weight: 400;">{{info.payTime | formatDate}}</view>
					</view> 
					<view class="a" v-if="info.acceptanceTime">
						<text style="font-weight: bold;">接单时间</text> 
						<view style="color: #999999;font-weight: 400;">{{info.acceptanceTime | formatDate}}</view>
					</view> 
					<view class="a" v-if="info.setOutTime">
						<text style="font-weight: bold;">出发时间</text> 
						<view style="color: #999999;font-weight: 400;">{{info.setOutTime | formatDate}}</view>
					</view> 
					<view class="a" v-if="info.arriveTime">
						<text style="font-weight: bold;">到达时间</text> 
						<view style="color: #999999;font-weight: 400;">{{info.arriveTime | formatDate}}</view>
					</view> 
					<view class="a" v-if="info.beginTime">
						<text style="font-weight: bold;">开始时间</text> 
						<view style="color: #999999;font-weight: 400;">{{info.beginTime | formatDate}}</view>
					</view> 
					<view class="a" v-if="info.endTime">
						<text style="font-weight: bold;">结束时间</text> 
						<view style="color: #999999;font-weight: 400;">{{info.endTime | formatDate}}</view>
					</view> 
					<view class="a" v-if="info.overTime">
						<text style="font-weight: bold;">完结时间</text> 
						<view style="color: #999999;font-weight: 400;">{{info.overTime | formatDate}}</view>
					</view> 
				</view>
				 
			</view>
			 
		</view> 
		
		
		<view style="height: 77px;">
			
		</view>
		<view class="foot">
		
			 <view class="list4" v-if="info.orderStatus!=2"> 
			 		 
					
					 
			 		<!-- //订单状态 0待付款 1 已发布 2待服务3售后 4 售后中 5售后完成 6已完成 7已取消 -->
			 		<view  @click.stop="cancelOrder(info,1)" v-if="info.orderStatus==0"> 取消订单</view> 
			 		<view  @click.stop="cancelOrder(info,2)" v-if="info.orderStatus==1 "> 取消订单</view>  
			 		<view  @click.stop="cancelOrder(info,3)" v-if="info.orderStatus==2 "> 取消订单</view>   
			 		 
			 		<view  @click.stop="tourl('/pages/order/editOrder?id='+info.id)" 
			 		v-if="info.orderStatus==0 || info.orderStatus==1 || info.orderStatus==2"> 修改订单</view>
			 		
			 		<view  @click.stop="tourl('/pages/order/payOrder?orderList='+info.type+'&id='+info.id)" 
			 		v-if="info.orderStatus==0"> 去付款</view>
			 		
			 		<view  @click.stop="eralychose(info)" v-if="info.orderStatus==2 "> 提前结束</view>
			 			
			 		<view  @click.stop="deleteOrder(info)" v-if="info.orderStatus==6 || info.orderStatus==5"> 删除订单</view>
			 		<view  @click.stop="toInvoice(info)"
			 			v-if="info.orderStatus==6 || info.orderStatus==5"> 
			 			{{info.invoiceStatus>1 ? '查看发票':'申请发票' }}
			 		</view>
			 		<view @click.stop="tourl('/pages/my/appraise/addappraise?id='+info.id)"
			 			v-if="info.orderStatus==6 && !info.commentStatus"> 评价晒单</view>
			 			
			 		<view  @click.stop="tourl('/pages/order/order?oldId='+info.id)" v-if="info.orderStatus==6"> 再来一单</view>
			 		
			 		<view  @click.stop="aftersalecancel(info)" 
			 		v-if="info.orderStatus==4 || info.orderStatus==3"> 取消售后</view>	
			 		<!-- <view  @click.stop="tourl('/pages/my/invoice/addinvoice?view=1&id='+info.id)"
			 			v-if="info.orderStatus==5"> 查看发票</view>	 -->
			 		 
			 	</view>
			 	<!-- 待服务 
			 	0 已出发 1 已到达 2已结束 4 待服务 5 拒单 6 转单申请 7 取消申请 11 修改订单 -->
			 	<view class="list4" v-else>
			 		 
			 		<view  @click.stop="cancelOrder(info,3)" 
			 		v-if="info.orderSubStatus==4 || info.orderSubStatus==0 || info.orderSubStatus==1" > 取消订单</view> 
					
					
					<view style="position: relative;"
					v-if="info.orderSubStatus==4 || info.orderSubStatus==0 || info.orderSubStatus==1 || info.orderSubStatus==12"> 分享
					 
					 <button  @tap="handleShare(info)" open-type="share" plain=none
					style="margin: 0;padding: 0;position: absolute;height: 50rpx;top: 0;left: 0;width: 100%;border: none;" >
					 </button>
					 
					 </view> 
					
			 
			 		<view  @click.stop="tourl('/pages/order/editOrder?id='+info.id)" 
			 		v-if="info.orderSubStatus==4 || info.orderSubStatus==0 || info.orderSubStatus==1"> 修改订单</view>
			 		
			 		<view  @click.stop="eralychose(info)"
			 			v-if="info.orderSubStatus==12"> 提前结束</view>
			 		
			 		<!-- v-if="info.orderSubStatus==1" -->
			 		<view  @click.stop="tourl('/pages/order/addTimeOrder?id='+info.id)"
			 			v-if="(info.orderSubStatus==1 || info.orderSubStatus==12)  && info.type==1"> 订单加时</view>
			 			<!-- v-if="info.orderSubStatus==2" -->
			 		<view  @click.stop="tourl('/pages/order/serviceacceptance?id='+info.id)" 
			 			v-if="info.orderSubStatus==2"> 服务验收</view>	
			 		<view @click.stop="tourl('/pages/my/appraise/addappraise?id='+info.id)"
			 			v-if="info.orderStatus==6 && !info.commentStatus"> 评价晒单</view>
			 		<view   @click.stop="tourl('/pages/order/order?oldId='+info.id)"
			 			v-if="info.orderSubStatus==2"> 再来一单</view>	
			 		 
			 	</view>
			 
		</view>
		<reason-list title="取消原因" dict="cancel_order" ref="reason" @handleChange="reasonCallback"></reason-list>
		<early-termination ref="termination" @handleChange="handleEarly"></early-termination>
	</view>
</template>

<script>
	 
	import {cancelOrderAPI,orderListAPI,cancelOrderWaitingAPI,earlyTerminationOrderAPI,updateOrderApplyAPI,
	deleteOrderAPI,aftersalecancelAPI,orderdetailAPI,staffTransferOrderAPI,staffCancelOrderAPI} from "@/api/order.js"
	import { createdMsgAPI ,getinvoiceAPI} from "@/api/user.js"
	import reasonList from "./components/reasonList.vue"
	import earlyTermination from "./components/earlyTermination.vue"
	import statusRecord from "./components/statusRecord.vue"
	import dict from "@/mixins/dict.js"
	export default {
		mixins:[dict],
		components:{
			statusRecord,reasonList,earlyTermination
		},
		data() {
			return {
				dictCode:{
					staff_user_status:[]
				},
				id:"",
				info:{
					 
				},
				orderStaffDOS:[],
				images:[],
				serviceTime:"",
				periceFlag:false,
				orderFlag:false,
				after:{
					isEnd:0
				}
			}
		},
		onLoad(option) {
			 this.id=option.id
			this.getdata()
		},
		filters:{
			statusStr(val){
				if(val>=0 && val<=12){
					let obj={
						"0":"已出发",
						"1":"已到达",
						"2":"已结束",
						"4":"待服务",
						"5":"拒单",
						"6":"转单申请",
						"7":"取消申请",
						"11":"修改申请",
						"12":"已开始",
					}
					
					return obj[val+''] || val
				}else{
					val
				}
			},
		},
		methods: {
			handleShare(item) {
				console.log("11111",item)
			      // 动态设置分享标题和路径
			      const title = `分享 ${item.categoryName} 的订单`;
			      const path = `/pages/order/orderinfo?id=${item.id}`;
			
			      // 使用 uni-app API 设置分享配置
			      uni.updateShareMenu({
			        withShareTicket: true,
			        menus: ['shareAppMessage', 'shareTimeline'],
			        success: () => {
			          console.log('分享菜单更新成功');
			        },
			        fail: (err) => {
			          console.error('分享菜单更新失败', err);
			        }
			      });
				  // 监听分享事件
				  uni.onShareAppMessage((res) => {
				    if (res.from === 'button') {
				      // 来自页面内分享按钮
				      return {
				        title,
				        path,
				        success: (res) => {
				          console.log('分享成功', res);
				        },
				        fail: (err) => {
				          console.error('分享失败', err);
				        }
				      };
				    }
				  });
			    },
			toInvoice(info){
				// 1 未申请 2 开票中  3 开票完成
				if(info.invoiceStatus==1){
					this.tourl('/pages/my/invoice/addinvoice?view='+info.invoiceStatus+'&id='+info.id)
				}else if(info.invoiceStatus==2){
					getinvoiceAPI({orderId:info.id}).then(res=>{
						let email=res.email
						uni.showModal({
							title:"开票中",
							content:`发票开具中，开票完成后会发送到您的预留 邮箱${email}中，请注意查收`,
							showCancel:false,
							confirmText:"我已了解"
						})	 
					})
				}else if(info.invoiceStatus==3){
					getinvoiceAPI({orderId:info.id}).then(res=>{
						let email=res.email
						uni.showModal({
							title:"开票成功",
							content:`开票成功${email}中，下载查看`,
							showCancel:false,
							confirmText:"我已了解"
						})	 
					})
				}
				
			},
			// 字符串转josn
			strToJson(str){
				if(str){
					return JSON.parse(str)
				}else{
					return {}
				}
			},
			// 修改
			updateOrderApply(type){
				updateOrderApplyAPI({
					id:this.info.id,
					type
				}).then(res=>{
					uni.showToast({
						title:"提交成功"
					})
				})
			},
			// 取消
			staffCancelOrder(type){
				staffCancelOrderAPI({
					id:this.info.id,
					type
				}).then(res=>{
					uni.showToast({
						title:"提交成功"
					})
				})
			},
			// 留言
			createdMessage(item){
				uni.navigateTo({
					url:`/pages/my/websock/chat?recipientName=${item.name}&recipientId=${item.staffId}&recipientImages=${item.profilePhoto?item.profilePhoto:''}`
				})
				
			},
			// 转单
			staffTransferOrder(type){
				staffTransferOrderAPI({
					id:this.info.id,
					type
				}).then(res=>{
					uni.showToast({
						title:"提交成功"
					})
				})
			},
			getdata(){
				orderdetailAPI({id:this.id}).then(res=>{
					this.info=res
					this.orderStaffDOS=res.orderStaffDOS
					this.images=res.images?res.images.split(",") :[]
					this.serviceTime=res.serviceStartTime
					
					if(res.afterSaleDO && res.afterSaleDO.length==3){
						this.after=res.afterSaleDO[2]
					}
				})
				
			},
			resetQuery(){
				this.getdata()
			}, 
			lookImg(val){
				const urls = this.images
				const current = val
				uni.previewImage({
					urls,
					current
				})
			},
			
			/******************底部操作按钮*************************/ 
			// 单个取消订单
			cancelOrder(item,cancelType){
				
				this.ids=[item.id]
				this.cancelType=cancelType
				if(cancelType==3){
					// 先获取一下不能退的金额
					cancelOrderWaitingAPI({id:item.id}).then(res=>{
						this.$refs.reason.money=res
					})
				} 
				this.$refs.reason.visible=true
			},
			// 弹出框后确认取消订单
			reasonCallback(cancel,money){
				if(cancel.length){
					cancelOrderAPI({
						ids:this.ids,
						reason:cancel.join(","),
						money:this.cancelType==3?money:undefined
					},this.cancelType).then(res=>{
						uni.showToast({
							 title: "取消订单",
							 duration: 1800				
						});	
						this.resetQuery()
					})
				}else{
					uni.showToast({
						 title: "请选择理由", 
						 icon:'none'					
					});	
				}
				
			},
			// 提前确认
			eralychose(item){
				this.choseItem=item
				this.$refs.termination.visible=true
			},
			// 弹出框提前确认
			handleEarly(endRemarks){
				earlyTerminationOrderAPI({
					id:this.choseItem.id,
					endRemarks
				}).then(res=>{
					uni.showToast({
						 title: "已确认订单",
						 duration: 1800				
					});	
					this.resetQuery()
				})
			} ,
			// 删除订单
			deleteOrder(info){
				deleteOrderAPI({id:info.id}).then(res=>{
					uni.showToast({
						 title: "已删除订单",
						 duration: 2000				
					});	
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
			// 取消售后
			aftersalecancel(item){
				aftersalecancelAPI({id:item.id}).then(res=>{
					uni.showToast({
						 title: "已取消售后",
						 duration: 2000				
					});	
					this.resetQuery()
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.pages{
	padding-bottom: 100rpx; 
	background-color: #F8F8F8; 
	min-height: 100vh;
	.box{
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		 
		.a{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin:20rpx 0;
			view{
				color: #333333;
				font-weight: 600;
				font-size: 28rpx;
			}
			text{
				font-size: 28rpx;
			}
			:first-child{
				width: 150rpx;
				 
			}
			:last-child{
				flex: 1;
				text-align: right;
			}
		}
		.box-top{
			 
			display: flex;
			align-items: center;
			justify-content: space-between;
			view{
				color: #333333;
				font-weight: 600;
				font-size: 28rpx;
			}
			
		}
	}
}
.box1{
	position: relative;
	padding: 10rpx 60rpx; 
	.b{
		color: #333333;
		font-weight: 500;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		.contact{
			flex: 1;
			display: flex;
			align-items: center;
			.tou{
				margin: 15rpx;
				border-radius: 50%;
				background-color: #AAAAAA;
				width: 60rpx;
				height: 60rpx;
				image{
					width: 60rpx;
					height: 60rpx;
				}
			}
			
			text{
				font-weight: 400;
				font-size: 28rpx;
			}
			.ly{
				border-radius: 28rpx;
				border: 1rpx solid #AAAAAA;
				font-size: 22rpx;
				padding:8rpx 25rpx;
				text-align: center;
				margin-left: 20rpx;
				color: #333;
			}
		}
		
		.staus{
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			// width: 104rpx;
			text-align: right;
		}
	}
	 
	 
}
.box2{
	.b{
		margin: 10rpx 0;
		
		view{
			color: #333333;
			font-weight: 600;
			font-size: 28rpx;
			 
		} 
		.img{
			display: flex;
			align-items: center;
			
			image{
				width: 200rpx;
				height: 200rpx;
				margin: 15rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
			}
		}
	}
}
 
 
.foot{
	position: fixed;
	bottom: 0;
	left: 0;
	 
	width: 100%;
	background-color: #FFF;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #e6e6e6;
	padding: 20rpx 0; 
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.list4{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap; 
		view{
			padding: 10rpx 24rpx;
			 
			border-radius: 36rpx;
			border: 1px solid #AAAAAA;
			margin: 10rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.xq{
			background-color:#ff3a3e;
			border: 1px solid #ff3a3e;
			color: #fff;
		}
	}
}
.adress {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-top: 30rpx;

	.a1 {
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 53rpx;
	}

	.a2 {
		font-size: 24rpx;
		color: #999999;
		line-height: 48rpx;
	}
}
.woodsbtn{
	font-size: 32rpx;
}
</style>
